<template id="personCenter">
    <div class="person_all">
        <div class="personCenter_top" @click="get_pre()">
            <h3 id="tag_name">个人信息</h3>
            <img src="../image/dayu.jpg" alt="">
        </div>
        <div class="person_1">
            <span>头像</span>
            <img src="../image/ma.jpg" alt="">
            <img src="../image/day.jpg" alt="">
        </div>
        <div class="person_2">
            <span>昵称</span>
            <span>150****8989</span>
            <img src="../image/day.jpg" alt="">
        </div>
        <div class="person_3" @click="get_sex()">
            <span>性别</span>
            <span>保密</span>
            <img src="../image/day.jpg" alt="">
        </div>
        <div class="person_4" @click="get_birth()">
            <span>生日</span>
            <input id="birth_con"  readonly="readonly" placeholder="未填写">
            <img src="../image/day.jpg" alt="">
        </div>
        <div class="person_5" @click="get_Index()">
            <span>地址管理</span>
            <img src="../image/day.jpg" alt="">
        </div>
        <div class="person_6" @click="get_bind()">
            <span>绑定手机</span>
            <span>150****7894</span>
            <img src="../image/day.jpg" alt="">
        </div>
        <div class="person_7" @click="get_pd()">
            <span>修改密码</span>
            <span>设置密码</span>
            <img src="../image/day.jpg" alt="">
        </div>
<!--修改生日弹窗-->
        <div class="birth" v-show="birth_show">
            <span class="birth_span1">完成</span>
            <div class="birth_mm">
            <div class="swiper-container" id="birth">
                <div class="swiper-wrapper">
                    <div class="swiper-slide">美女</div>
                    <div class="swiper-slide">保密</div>
                    <div class="swiper-slide">帅哥</div>
                </div>
               <!-- <div class="swiper-wrapper">
                    <div class="swiper-slide">保密</div>
                </div>
                <div class="swiper-wrapper">
                    <div class="swiper-slide">帅哥</div>
                </div>-->
            </div>
            </div>

        </div>
        <div class="back_one" v-show="show_ba" @click="get_xiao()"></div>
    </div>


</template>

<script>
    export default {
        name: 'personCenter',
        data() {
            return {
                birth_show:false,
                show_ba:false,
            }
        },

        mounted: function () {
            let H = $(window).height();
            $('.person_all').height(H)
            let swiper_first = new Swiper('#birth', {
                observer:true,//修改swiper自己或子元素时，自动初始化swiper
                observeParents:true,//修改swiper的父元素时，自动初始化swiper
                direction:'vertical',
                onSlideChangeEnd: function(swiper){
                    /*alert(swiper.activeIndex)*/ //切换结束时，告诉我现在是第几个slide
                }
            });

            var calendar = new datePicker();
            calendar.init({
                'trigger': '#birth_con', /*按钮选择器，用于触发弹出插件*/
                'type': 'date',/*模式：date日期；datetime日期时间；time时间；ym年月；*/
                'minDate':'1900-1-1',/*最小日期*/
                'maxDate':'2100-12-31',/*最大日期*/
                'onSubmit':function(){/*确认时触发事件*/
                    var theSelectData=calendar.value;
                },
                'onClose':function(){/*取消时触发事件*/
                }
            });

        },
        methods: {
            get_sex:function(){
                this.birth_show=!this.birth_show;
                this.show_ba=true;
            },
            get_birth:function(){
                //todo
            },
            get_Index:function(){
                this.$router.push('/addIndex');
            },
            get_pre:function () {
                window.history.go(-1);
            },
            get_xiao:function(){
                this.show_ba=false;
                this.birth_show=false;
            },
            get_bind:function(){
                this.$router.push('/bindPhone')
            },
            get_pd:function () {
                this.$router.push('/person_psd')
            }
        }
    }


</script>
<style>
    .date_bg{
        background:#000000;
        opacity:0.5;
    }
    .back_one{
        height:100%;
        width:100%;
        background:#000000;
        filter:alpha(opacity=50);
        opacity: 0.5;
        position:fixed;
        left:0;
        top:0;
        z-index: 1;
    }
    .date_roll{
        font-weight:normal;
    }
    /*生日*/
    #birth .swiper-wrapper .swiper-slide.swiper-slide-active{
        color:#758f3d;
    }
    #birth,.swiper-container,.swiper-wrapper{
        width:100%;
      /*  height:2.81rem;*/
        height:0.54rem;
        overflow: visible;
    }
    .birth_mm{
        height:2.3rem;
        overflow:hidden;
    }
    #birth .swiper-wrapper{
        height:0.54rem;
        width:100%;
    }
    #birth .swiper-wrapper .swiper-slide{
        font-size:0.28rem;
        color:#dcdcdc;
        line-height:0.54rem;
        height:0.54rem;
        width:100%;
        text-align:center;
    }
    .birth{
        width:100%;
        height:3.52rem;
        position:fixed;
        bottom:0;
        left:0;
        z-index:2;
        background:#ffffff;
    }
    .birth_span1{
        height:0.7rem;
        width:auto;
        font-size:0.3rem;
        color:#758f3d;
        background:#f8f8f8;
        line-height:0.7rem;
        display:block;
        margin-bottom:0.7rem;
        text-indent:5.6rem;
    }
    /*头像部分*/
    .person_7{
        height:0.65rem;
        width:100%;
        border-bottom:0.01rem solid #f0f0f0;
        background:#ffffff;
        position:relative;
    }
    .person_7 span:nth-of-type(1){
        height:0.65rem;
        line-height:0.65rem;
        font-size:0.26rem;
        color:#676767;
        margin-left:0.24rem;
        display:block;
        float:left;
    }
    .person_7 span:nth-of-type(2){
        display:block;
        height:0.65rem;
        float:right;
        line-height:0.65rem;
        margin-right:0.85rem;
        font-size:0.2rem;
        color:#a5a5a5;
    }
    .person_7 img{
        width:0.21rem;
        height:0.36rem;
        position:absolute;
        right:0.24rem;
        top:0.15rem;
        display:block;

    }
    .person_6{
        height:0.65rem;
        width:100%;
        border-bottom:0.01rem solid #f0f0f0;
        background:#ffffff;
        position:relative;
    }
    .person_6 span:nth-of-type(1){
        height:0.65rem;
        line-height:0.65rem;
        font-size:0.26rem;
        color:#676767;
        margin-left:0.24rem;
        display:block;
        float:left;
    }
    .person_6 span:nth-of-type(2){
        display:block;
        height:0.65rem;
        float:right;
        line-height:0.65rem;
        margin-right:0.85rem;
        font-size:0.2rem;
        color:#a5a5a5;
    }
    .person_6 img{
        width:0.21rem;
        height:0.36rem;
        position:absolute;
        right:0.24rem;
        top:0.15rem;
        display:block;

    }
    .person_5{
        height:0.65rem;
        width:100%;
        border-bottom:0.01rem solid #f0f0f0;
        background:#ffffff;
        position:relative;
        margin-bottom:0.14rem;
    }
    .person_5 span:nth-of-type(1){
        height:0.65rem;
        line-height:0.65rem;
        font-size:0.26rem;
        color:#676767;
        margin-left:0.24rem;
        display:block;
        float:left;
    }
    .person_5 img{
        width:0.21rem;
        height:0.36rem;
        position:absolute;
        right:0.24rem;
        top:0.15rem;
        display:block;

    }
    .person_4{
        height:0.65rem;
        width:100%;
        border-bottom:0.01rem solid #f0f0f0;
        background:#ffffff;
        position:relative;
    }
    .person_4 span:nth-of-type(1){
        height:0.65rem;
        line-height:0.65rem;
        font-size:0.26rem;
        color:#676767;
        margin-left:0.24rem;
        display:block;
        float:left;
    }
    .person_4 input{
        display:block;
        height:0.65rem;
        width:2rem;
        float:right;
        line-height:0.65rem;
       /* margin-right:-0.48rem;*/
        font-size:0.2rem;
        color:#a5a5a5;
        text-indent: 0.2rem;
        border:0;
        outline:none;
    }
    .person_4 input::-webkit-input-placeholder {
        text-indent: 0.6rem;
    }
    .person_4 img{
        width:0.21rem;
        height:0.36rem;
        position:absolute;
        right:0.24rem;
        top:0.15rem;
        display:block;

    }
    .person_3{
        height:0.65rem;
        width:100%;
        border-bottom:0.01rem solid #f0f0f0;
        background:#ffffff;
        position:relative;
    }
    .person_3 span:nth-of-type(1){
        height:0.65rem;
        line-height:0.65rem;
        font-size:0.26rem;
        color:#676767;
        margin-left:0.24rem;
        display:block;
        float:left;
    }
    .person_3 span:nth-of-type(2){
        display:block;
        height:0.65rem;
        float:right;
        line-height:0.65rem;
        margin-right:0.85rem;
        font-size:0.2rem;
        color:#a5a5a5;
    }
    .person_3 img{
        width:0.21rem;
        height:0.36rem;
        position:absolute;
        right:0.24rem;
        top:0.15rem;
        display:block;

    }
    /*3*/
    .person_2{
        height:0.65rem;
        width:100%;
        border-bottom:0.01rem solid #f0f0f0;
        background:#ffffff;
        position:relative;
    }
    .person_2 span:nth-of-type(1){
        height:0.65rem;
        line-height:0.65rem;
        font-size:0.26rem;
        color:#676767;
        margin-left:0.24rem;
        display:block;
        float:left;
    }
    .person_2 span:nth-of-type(2){
        display:block;
        height:0.65rem;
        float:right;
        line-height:0.65rem;
        margin-right:0.85rem;
        font-size:0.2rem;
        color:#a5a5a5;
    }
    .person_2 img{
        width:0.21rem;
        height:0.36rem;
        position:absolute;
        right:0.24rem;
        top:0.15rem;
        display:block;

    }
    .person_1 span{
        height:1.53rem;
        width:1.5rem;
        line-height:1.53rem;
        color:#676767;
        font-size:0.26rem;
        margin-left:0.24rem;
        display:block;
    }
    .person_1 img:nth-of-type(1){
        height:1.03rem;
        width:1.03rem;
        -webkit-border-radius: 50%;
        border-radius:50%;
        position:absolute;
        top:0.28rem;
        right:0.85rem;
        display:block;
    }
    .person_1 img:nth-of-type(2){
        width:0.21rem;
        height:0.36rem;
        position:absolute;
        right:0.24rem;
        top:0.5rem;
        display:block;
    }
    .person_1{
        width:100%;
        height:1.53rem;
        border:0.01rem solid #f0f0f0;
        background:#ffffff;
        position:relative;
    }
    /*头部部分*/
    .person_all{
        background:#f5f4f2;
        width:100%;
        height:11.3rem;
        overflow-x: hidden;
    }
    .personCenter_top h3{
        width:100%;
        height:0.79rem;
        line-height:0.79rem;
        text-align:center;
        color:#85a45a;
        font-size:0.28rem;
    }
    .personCenter_top img{
        display:block;
        position:absolute;
        height:0.37rem;
        width:0.31rem;
        left:0.27rem;
        top:0.25rem;
    }
    .personCenter_top{
        width:100%;
        height:0.79rem;
        border-bottom:1px solid #f0f0f0;
        position:relative;
        background:#ffffff;
        margin-bottom:0.1rem;
    }
</style>